<script setup lang="ts">
import { onMounted } from 'vue';
import { useRescueForcesStore } from '@/store/modules/earlyWarning/useRescueForcesStore';
import UNIT_MAP from '@/constants/components/unit';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';

const { emergencyResourcesData, emergencyRepairTeamTotal } = storeToRefs(useRescueForcesStore());
const { emergencyRepairTeam, deviceHandler, initEmergencyResources } = useRescueForcesStore();

// 在组件挂载时初始化应急资源数据
onMounted(() => {
  initEmergencyResources();
});
</script>
<template>
  <el-row :gutter="20" class="emergency-box">
    <div class="emergency-resources-box">
      <div :class="[item.className]" v-for="item in emergencyResourcesData" :key="item.id" @click="deviceHandler(item.clickParams)">
        <div>{{ item.value + item.unit }}</div>
        <div>{{ item.name }}</div>
      </div>
      <div class="emergency-repair-team-text-box" @click="emergencyRepairTeam()">
        <span class="num">{{ emergencyRepairTeamTotal + UNIT_MAP.A }}</span>
        <span class="emergency-repair-team">{{ COMPONENT_TITLES.REPAIR_TEAM }}</span>
      </div>
    </div>
  </el-row>
</template>

<style scoped lang="scss">
.emergency-box {
  width: 100%;
  height: 100%;

  .emergency-resources-box {
    width: 100%;
    height: 100%;
    background: url(@/assets/largescreen/emergency-resources-icon.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    color: white;

    .emergency-repair-team-text-box {
      position: absolute;
      bottom: 33%;
      left: 50%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: 1fr;

      .num {
        cursor: pointer;
        font-size: 1.4375rem;
        font-weight: bold;
      }

      .emergency-repair-team {
        font-size: 1.1875rem;
        font-weight: 500;
        cursor: pointer;
      }
    }

    .air-bubble-1,
    .air-bubble-2,
    .air-bubble-3,
    .air-bubble-4,
    .air-bubble-5,
    .air-bubble-6 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 9.375rem;
      height: 9.375rem;
      position: absolute;
      background-image: url(@/assets/largescreen/airbubble.png);
      background-size: 100% 100%;
      // animation: pulse 3s ease-in-out infinite;
      cursor: pointer;
      z-index: 99;

      :first-child {
        font-size: 0.75rem;
        font-weight: bold;
      }

      :last-child {
        font-size: 0.5625rem;
        font-weight: 500;
      }
    }

    .air-bubble-1 {
      width: 4.9331rem;
      height: 4.9331rem;
      top: 50%;
      left: 11%;
    }

    .air-bubble-2 {
      width: 5.4544rem;
      height: 5.4544rem;
      top: 7%;
      left: 0;
    }

    .air-bubble-3 {
      width: 5.5844rem;
      height: 5.5844rem;
      top: 1%;
      left: 29%;
    }

    .air-bubble-4 {
      width: 6.0575rem;
      height: 6.0575rem;
      top: -9%;
      right: 22%;
    }

    .air-bubble-5 {
      width: 4.8063rem;
      height: 4.8063rem;
      top: 19%;
      right: -2%;
    }

    .air-bubble-6 {
      width: 5rem;
      height: 5rem;
      top: 52%;
      right: 11%;
    }
  }
}

@media (min-width: 3840px) {
  .air-bubble-4 {
    top: -4% !important;
    right: 5% !important;
  }
  .air-bubble-5 {
    top: 27% !important;
    right: -8% !important;
  }
}
</style>
